<template>
    <div class="header-menu" v-show="!$route.meta.hidden">
        <div class="shrink-sign">
            <span
                class="iconfont"
                :class="showClassName"
                @click="toggleMenu"
            ></span>
            <el-button type="primary" round>立即签署</el-button>
        </div>
        <div class="options">
            <ChangeTheme />
            <div class="icon-btn">
                <button class="iconfont icon-lingdang"></button>
                <button class="iconfont icon-yanzheng"></button>
                <button class="iconfont icon-jj"></button>
            </div>
            <div class="change-language head-quick">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        语言切换
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>简体中文</el-dropdown-item>
                        <el-dropdown-item>English</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="user head-quick">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <span class="portrait">
                            <div class="user-img">
                                <img
                                    src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1632678360,2678133978&fm=26&gp=0.jpg"
                                />
                            </div>
                        </span>
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <p>个人中心</p>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <p @click="logOut">安全退出</p>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script>
import ChangeTheme from 'components/theme/change-theme.vue'
import { themeModule } from '@/store/modules/theme'
import { userModule } from '@/store/modules/user'

export default {
    name: 'header-menu',
    data() {
        return {
            /** menu显示标志位 */
            showClassName: 'icon-intent-decrease'
        }
    },
    methods: {
        /** 侧边栏menu的显示与隐藏 */
        toggleMenu() {
            if (this.showClassName === 'icon-intent-decrease') {
                themeModule.SET_CLOSE(true)
                this.showClassName = 'icon-outdent'
            } else {
                themeModule.SET_CLOSE(false)
                this.showClassName = 'icon-intent-decrease'
            }
        },

        /** 退出 */
        async logOut() {
            await userModule.LogOut().then(() => {
                this.$router.push({ name: 'login' })
            })
        }
    },
    components: {
        ChangeTheme
    }
}
</script>

<style lang="less" scoped>
.header-menu {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: calc(100% - 208px);
    height: 60px;
    padding: 12px 15px;
    background-color: #fff;
    border-bottom: 1px solid #e5e7ea;
    position: fixed;
    top: 0;
    left: 208px;
    z-index: 2000;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    .shrink-sign {
        .iconfont {
            float: left;
            padding-right: 20px;
            margin: 6px 20px 6px 0;
            font-size: 20px;
            line-height: 24px;
            cursor: pointer;
            border-right: 1px solid #c0c4cc;
        }
        /deep/ .el-button {
            padding: 10px 20px;
        }
    }
    .options {
        display: flex;
        .icon-btn {
            margin-right: 16px;
            & .iconfont {
                font-size: 20px;
                width: 30px;
                height: 30px;
                border-radius: 4px;
                background: none;
                border: none;
                outline: none !important;
                padding: 0;
                margin: 0 10px;
                cursor: pointer;
            }
            &:nth-last-child(3)::after {
                position: absolute;
                content: '';
                width: 1px;
                height: 20px;
                background-color: #e5e7ea;
            }
        }
        .change-language {
            margin-right: 16px;
        }
        .head-quick {
            float: left;
            i {
                display: inline-block;
                margin-left: 8px;
                margin-top: 10px;
                vertical-align: baseline;
                font-size: 12px;
            }
        }
    }
}

/deep/ .el-dropdown {
    display: inline-block;
    position: relative;
    color: #4c596e;
    font-size: 14px;
}
/deep/ .el-dropdown-link {
    cursor: pointer;
}

.portrait {
    position: relative;
    top: 2px;
    float: left;
}

.user-img {
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 60px;
    text-align: center;
    overflow: hidden;
    position: relative;
    img {
        max-height: 100%;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 60px;
    }
}
</style>
